<template>
  <div class="base-title">
    <div class="base-title-warpper">
      <div
        class="base-title-decorate"
        :style="{
          'background-color':bgColor,
          'width': width,
          'height': height
        }"></div>
      <div
        class="base-title-content"
        :style="{
          'font-size': fontSize
        }">{{title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#008cee'
    },
    width: {
      type: String,
      default: '6px'
    },
    height: {
      type: String,
      default: '24px'
    },
    fontSize: {
      type: String,
      default: '24px'
    }
  }
}
</script>

<style scoped lang="scss">
  .base-title {
    width: 100%;
    .base-title-warpper {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      >.base-title-decorate {
        margin-right: 10px;
        border-radius: 0 4px 4px 0;
      }
      >.base-title-content {
        flex: 1;
      }
    }
  }
</style>
